<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import echarts from 'echarts'
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'
import 'echarts-liquidfill'

export default {
  name: 'chart-liquidfill-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'liquidFill'
    }
  },

  methods: {
    init() {
      this.chart = echarts.init(this.$refs.chart)

      if (this.data.length > 0) {
        this.setOption()
      }
    },

    setOption () {
      let vm = this
      if (this.data.length > 0) {
        let value = this.data[0].value
        let data = [value, value, value]
        let option = {
          // tooltip: {
          //   trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          //   textStyle: {
          //     color: '#fff' // 文字颜色
          //   },
          //   // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          //   // 水球图: {a}（系列名称），{b}（无），{c}（数值）
          //   // 使用函数模板   传入的数据值 -> value: number|Array,
          //   formatter: function (param) {
          //     return param.seriesName + ': ' + param.data * 100 + '%'
          //   }
          // },
          series: [{
            type: vm.chartType,
            radius: vm.radius,
            center: ['50%', '50%'],
            data: data,
            shape: 'circle',
            outline: {
              show: vm.showBorder,
              borderDistance: 8,
              itemStyle: {
                color: 'none',
                borderColor: vm.borderColor,
                borderWidth: 8,
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.25)'
              }
            },
            // 图形样式
            itemStyle: {
              color: vm.boColor, // 水球显示的背景颜色
              opacity: vm.boOpacity, // 波浪的透明度
              // shadowColor: 'rgba(0, 0, 0, 0.4)',
              shadowBlur: 150 // 波浪的阴影范围
            },
            backgroundStyle: {
              // borderWidth: 0,
              // borderColor: '#E3F7FF',
              color: vm.neiColor, // 水球未到的背景颜色
              opacity: vm.neiOpacity
            },
            emphasis: {
              itemStyle: {
                opacity: 0.95 // 鼠标经过波浪颜色的透明度
              }
            },
            label: {
              normal: {
                formatter:  (Math.round(value * 10000) / 100) + '%',
                textStyle: {
                  fontSize: vm.fontSize,
                  fontWeight: 'bold',
                  fontFamily: 'customer'
                }
              }
            }
          }]
        }

        vm.chart.setOption(option, true)
        vm.resize()
      }
    }
  },

  watch: {
    height () {
      this.setOption()
    },
    radius () {
      this.setOption()
    },
    fontSize () {
      this.setOption()
    },
    boColor () {
      this.setOption()
    },
    boOpacity () {
      this.setOption()
    },
    neiColor () {
      this.setOption()
    },
    showBorder () {
      this.setOption()
    },
    borderColor () {
      this.setOption()
    },
    shape () {
      this.setOption()
    },
    neiOpacity () {
      this.setOption()
    },

    data: {
      deep: true,
      handler () {
        this.setOption()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
